import React from 'react'
import ImgCrop from 'antd-img-crop'
// import { connect } from 'dva'
import styles from './BrandSet.less'
import { Input, Form, Popover, Icon, Upload, message, Button, Skeleton } from 'antd'
import Header from '../../components/Header/index'
import propTypes from 'prop-types'
import gql from 'graphql-tag'
import GraphqlComponent from 'DHBStatement/libs/components/GraphqlComponent'

const AGQL = (props) => component => GraphqlComponent(component, props, 'system')
const headerData = {
  title: '品牌设置',
  hasPopover: true,
  popoverContent: <div>让你自己的订货平台更符合你们公司的品牌需要</div>,
  hasSubNav: true,
  subNavItem: [{
    title: '首页',
    link: true
  }, {
    title: '系统',
    link: false
  }, {
    title: '公司设置',
    link: true
  }]
}
// 上传logo
const imgprops = {
  name: 'file',
  multiple: true,
  action: '//jsonplaceholder.typicode.com/posts/',
  onChange (info) {
    const status = info.file.status
    if (status !== 'uploading') {
      console.log(info.file, info.fileList)
    }
    if (status === 'done') {
      message.success(`${info.file.name} file uploaded successfully.`)
    } else if (status === 'error') {
      message.error(`${info.file.name} file upload failed.`)
    }
  }
}
// const imgcrop = {
//   width: '100',
//   height: '100',
//   scale: '100'
// }
// const Dragger = Upload.Dragger
const prefix = (<div>订货平台名称是你的客户在订货端看到的名称</div>)
const systemName = (<div>登录网址是您的专有订货网址，你的客户可通过该网址访问订货端</div>)
const slogan = (<div>当客户登录与注册时会看到你此广告语</div>)
const logo = (<div>LOGO会展示到您的订货端，影响您的订货客户<br />请按照以下建议上传LOGO以达到最佳展示效果：<br /> 1、图片高度120px，宽120px-520px，大小不超过6MB<br /> 2、 支持JPG、PNG、JPEG3、裁剪时LOGO左右不留间隙</div>)

const Save = ({ validateFields, editSystemBasic }) => {
  return <Button type='primary' onClick={() => save(validateFields, editSystemBasic)}>保存</Button>
}
const SaveAGQL = AGQL({
  mutation: gql`
    mutation editSystemBasic($system: SystemBasicInput!){
      editSystemBasic(system: $system){
        status
        message
      }
    }
  `,
  name: 'editSystemBasic'
})(Save)
function save (validateFields, editSystemBasic) {
  validateFields((err, data) => {
    if (!err) {
      console.log(data)
      editSystemBasic({ variables: { system: data } }).then(res => {
        console.log(res)
        message.success(res.data.editSystemBasic.message)
      }).catch(err => {
        console.log(err)
      })
    }
  })
}
function BrandSet ({ loading, data, form: { getFieldDecorator, validateFields } }) {
  let { systemBasic = {} } = data
  console.log(systemBasic)
  return (
    <div>
      <Header header={headerData} />
      <div className={styles.container}>
        <Skeleton active loading={loading}>
          <Form>
            <Form.Item required label='订货平台名称'>
              {
                getFieldDecorator('platName', { initialValue: systemBasic.systemName })(
                  <Input />
                )
              }
              <Popover placement='bottom' content={systemName} trigger='hover'>
                <Icon type='question-circle' />
              </Popover>
            </Form.Item>
            <Form.Item required label='专属访问网址'>
              <span>http://</span>
              {
                getFieldDecorator('domainName', { initialValue: systemBasic.prefix })(
                  <Input style={{ width: '200px' }} />
                )
              }
              <span>.dhb168.com</span>
              <Button type='default'>访问你的订货平台</Button>
              <Popover placement='bottom' content={prefix} trigger='hover' style={{ width: 160 }}>
                <Icon type='question-circle' />
              </Popover>
            </Form.Item>
            <Form.Item label='广告语欢迎你'>
              {
                getFieldDecorator('slogan', { initialValue: systemBasic.slogan })(
                  <Input />
                )
              }
              <Popover placement='bottom' content={slogan} trigger='hover'>
                <Icon type='question-circle' />
              </Popover>
            </Form.Item>
            <Form.Item label='公司介绍'>
              {
                getFieldDecorator('logoImg', { initialValue: systemBasic.logo })(
                  <ImgCrop
                    style={{ width: '300', height: '200' }}
                  >
                    <Upload {...imgprops}>
                      <p className='ant-upload-drag-icon'>
                        <Icon type='inbox' />
                        <p className='ant-upload-text'>点击上传logo</p>
                      </p>
                      <Popover placement='bottom' content={logo} trigger='hover'>
                        <Icon type='question-circle' />
                      </Popover>
                    </Upload>
                  </ImgCrop>
                )
              }
            </Form.Item>
          </Form>
        </Skeleton>
      </div>

      {/* 页脚 */}
      <div className={styles.footer}>
        <SaveAGQL validateFields={validateFields} />
        <Button type='default' >取消</Button>
      </div>
    </div>
  )
}

BrandSet.propTypes = {
  loading: propTypes.bool,
  data: propTypes.object,
  form: propTypes.object
}
Save.propTypes = {
  validateFields: propTypes.func,
  editSystemBasic: propTypes.func,
  variables: propTypes.object
}
// const mapStateToProps = ({ employeeAcount }) => ({ employeeAcount })
export default AGQL({
  query: gql`
    query{
      systemBasic{
        systemName
        prefix
        logo
        slogan
      }
    }
  `
})((Form.create()(BrandSet)))
